<template>
    <div style="padding-top: 10px;">
        <Dropdown trigger="click" style="margin-left: 10px" placement="bottom-start" @on-click="showModel">
            <Button>
                新建连接
                <Icon type="ios-arrow-down"></Icon>
            </Button>
            <DropdownMenu slot="list">
                <DropdownItem name="mysql">Mysql</DropdownItem>
                <DropdownItem>炸酱面</DropdownItem>
                <DropdownItem disabled>豆汁儿</DropdownItem>
                <DropdownItem>冰糖葫芦</DropdownItem>
                <DropdownItem divided>北京烤鸭</DropdownItem>
            </DropdownMenu>
        </Dropdown>
        <Button>删除连接</Button>
        <Button>新建查询</Button>
        <Modal
        v-model="mysqlModel"
        title="新建MySQL连接"
        @on-ok="mysqlSave"
        @on-cancel="cancel">
            <Form :model="mysqlForm" label-position="left" :label-width="100">
                <FormItem label="连接名">
                    <Input v-model="mysqlForm.name"></Input>
                </FormItem>
                <FormItem label="主机">
                    <Input v-model="mysqlForm.host"></Input>
                </FormItem>
                <FormItem label="端口">
                    <Input v-model="mysqlForm.port"></Input>
                </FormItem>
                <FormItem label="用户名">
                    <Input v-model="mysqlForm.user"></Input>
                </FormItem>
                <FormItem label="密码">
                    <Input v-model="mysqlForm.password"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "gnerv-header",
        data () {
            return {
                mysqlModel: false,
                mysqlForm: {
                    type: "mysql",
                    name: "",
                    host: "",
                    port: "",
                    user: "",
                    password: ""
                }
            }
        },
        methods: {
            showModel(name) {
                if(name == "mysql") {
                    this.mysqlModel = true;
                }
            },
            mysqlSave () {
                this.$Message.info(this.mysqlForm.name);
            },
            cancel () {
                this.$Message.info('Clicked cancel');
            },
            createMysqlConfig () {

            }
        },
        created : function() {

        }
    }
</script>

<style scoped>
    .user-menu {
        position: absolute;
        right: 10px;
        height: 50px;
    }
    .user-menu a {
        line-height: 50px;
        font-size: 16px;
    }
</style>